<template>
  <div>
    <Card dis-hover :bordered="false">
      <Row>
        <Col span="3">
        <List class="ivu-sidebar">
          <span v-for="item in sidebar" :key="item.id" @click="changeTab(item.address)">
            <ListItem :class="item.address === tabId ? 'ivu-active' : ''">{{ item.name }}</ListItem>
          </span>
        </List>
        </Col>
        <Col span="21">
        <component :is="tabId"></component>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
    import conversion from './conversion.vue'// 项目转换情况反馈表
    import workLoad from './workLoad.vue'// 项目工作量反馈表
    import channel from './channel.vue'// 渠道转换情况反馈表
    import networkVisit from './networkVisit.vue'// 网络部到诊对话分析
    import projectTask from './projectTask.vue'// 项目任务推进表

    export default {
        name: 'feedBackForm',
        components: {
            conversion,
            workLoad,
            channel,
            projectTask,
            networkVisit
        },
        data () {
            return {
                tabId: 'conversion',
                sidebar: [
                    { id: 1, name: '项目转换情况反馈表', address: 'conversion' },
                    { id: 2, name: '项目工作量反馈表', address: 'workLoad' },
                    { id: 3, name: '项目渠道转化情况反馈表', address: 'channel' },
                    { id: 4, name: '网络部到诊对话分析', address: 'networkVisit' },
                    { id: 5, name: '项目任务推进表', address: 'projectTask' }
                ]
            };
        },
        methods: {
            changeTab (address) {
                this.tabId = address;
            }

        }

    };
</script>
<style>
  .ivu-sidebar span {
    cursor: pointer;
  }

  .ivu-active {
    font-weight: bold;
    color: #55b6ec;
  }
</style>
